
jQuery(function () {
    map();
    function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map_1'));
        
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value1).concat(data[i].value2)
                    });
                }
            }
            return res;
        };
        function renderMap(map){

            var option = {
                title : {
                    text: '各省市房源数、已入住数',
                    left: 'center',
                    textStyle:{
                        color: '#fff',
                        fontSize:16,
                        fontWeight:'normal',
                        fontFamily:"Microsoft YaHei"
                    },
                    subtextStyle:{
                        color: '#ccc',
                        fontSize:13,
                        fontWeight:'normal',
                        fontFamily:"Microsoft YaHei"
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var str = params.name + '</br>'
                        if(typeof(params.value)[2]){
                            str+= '总房源数：' + params.value[2] + '</br>';
                        }
                        if(typeof(params.value)[3]){
                            str+= '总入住数：' + params.value[3];
                        }
                        return str;
                    }
                },
                geo: {
                    map: 'china',
                    label: {
                        normal:{
                            show:true,
                            textStyle:{
                                color:'#999',
                                fontSize:13
                            }  
                        },
                        emphasis: {
                            show: true,
                            textStyle:{
                                color:'#fff',
                                fontSize:13
                            }
                        }
                    },
                    roam: false,
                    //zoom = 3.797498335832415,
                    zoom : 4.8,
                    //center : [112.02175544996886, 23.654464965093567],//当前视角的中心点
                    center : [112.02175544996886,24],
                    itemStyle: {
                        normal: {
                            areaColor: '#4c60ff',
                            borderColor: '#002097'
                        },
                        emphasis: {
                            areaColor: '#293fff'
                        }
                    }
                },
                series : [ 
                    {
                        name: '房源数',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {//圈圈的半径
                            return Math.log(val[2]) * 5 -10 ;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ffeb7b'
                            }
                        }
                    }	
                ],
                animationDuration:1000,
                animationEasing:'cubicOut',
                animationDurationUpdate:1000
                 
            };

            //渲染地图
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }

        function renderProvinceMap(mapname,data){
            
            var option = {
                title : {
                    text: '各市房源数、已入住数',
                    subtext: mapname,
                    left: 'center',
                    textStyle:{
                        color: '#fff',
                        fontSize:16,
                        fontWeight:'normal',
                        fontFamily:"Microsoft YaHei"
                    },
                    subtextStyle:{
                        color: '#ccc',
                        fontSize:13,
                        fontWeight:'normal',
                        fontFamily:"Microsoft YaHei"
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params)
                        return params.name + '<br/>总房源数'+ params.data.value[0] + '<br/>总入住数'+ params.data.value[1]
                    }
                },
                geo: {
                    map: '',
                },
                series : [ 
                    {
                        name: mapname,
                        type: 'map',
                        mapType: mapname,
                        zoom: 1, 
                        roam: true,
                        label: {
                            emphasis: {
                                show: true,
                                textStyle:{
                                    color:'#fff',
                                    fontSize:13
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#4c60ff',
                                borderColor: '#002097'
                            },
                            emphasis: {
                                areaColor: '#293fff'
                            }
                        },
                        data: data
                    }	
                ],
                animationDuration:1000,
                animationEasing:'cubicOut',
                animationDurationUpdate:1000
                 
            };
            //渲染地图
            myChart.setOption(option);
        }

        //注册地图
        echarts.registerMap('china', chinamap);
        //绘制地图
        renderMap('china');
        
        //地图点击事件
        myChart.on('click', function (params) {
            if(params.name != "湖南" && params.name != "广东" && params.name != "海南") return;
            var d = [];
            if( params.name == "湖南" ){
                for( var i=0;i<hunanmap.features.length;i++ ){
                    d.push({
                        name:hunanmap.features[i].properties.name,
                        value:[Math.round(Math.random()*10000 + 100),Math.round(Math.random()*10000 + 100)],
                    })
                }
                echarts.registerMap( params.name, hunanmap);
            }
            else if( params.name == "广东" ){
                for( var i=0;i<guangdongmap.features.length;i++ ){
                    d.push({
                        name:guangdongmap.features[i].properties.name,
                        value:[Math.round(Math.random()*10000 + 100),Math.round(Math.random()*10000 + 100)],
                    })
                }
                echarts.registerMap( params.name, guangdongmap);
            }
            else if( params.name == "海南" ){
                for( var i=0;i<hainanmap.features.length;i++ ){
                    d.push({
                        name:hainanmap.features[i].properties.name,
                        value:[Math.round(Math.random()*10000 + 100),Math.round(Math.random()*10000 + 100)],
                    })
                }
                echarts.registerMap( params.name, hainanmap);
            }
            
            renderProvinceMap(params.name, d);
        });
        
        myChart.getZr().on('click', (params)=>{ // 空白
            if(params.target){
                //console.log(params.name)
            }
            else if(myChart.getOption().title.subtext!=''){
                echarts.registerMap('china', chinamap);
                renderMap('china');
            }
        });
        
    }

})

